<template>
  <div>
    <p>eat: {{obj.hobby.eat}}</p>
    <button @click="obj.hobby.eat = '🍜'">面条</button>
    <!-- 下面写法表示是对 reactive 数据本省的修改 -->
    <button @click="obj = { hobby: { eat: '🍜' } }">面条2</button>
    <button @click="obj.hobby = { eat: '🍜' }">面条3</button>
  </div>
</template>

<script>
import { isReactive, reactive, watch } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      hobby: {
        eat: '西瓜',
      },
    })

    // 【watch 监听 reactive **内部**数据的变化】
    // !#1 强制开启了深度监听，并且配置无效
    // !#2 新旧值相等
    /* watch(obj, (newValue, oldValue) => {
      console.log(newValue === oldValue)
    }) */
    // !#3 reactive 内部的对象其实也是一个 reactive 类型的数据，那么就符合监听 reactive 数据的特点（上面 #1 和 #2）
    // console.log(isReactive(obj.hobby)) // true
    watch(obj.hobby, (newValue, oldValue) => {
      console.log(newValue === oldValue)
    })
    // !#4 对 reactive 数据本身的修改不会触发监听，例如 obj = { hobby: { eat: '🍜' } }
    /* watch(obj, (newValue, oldValue) => {
      console.log(newValue === oldValue)
    }) */
    return {
      obj
    }
  }
}
</script>

<style lang="scss" scoped>

</style>